<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            height: 100%;
            background-color: #ccc;
        }

        .box img {
            width: 400px;
        }

        .box ul {
            position: relative;
            height: 100%;
        }

        .box ul li {
            position: absolute;
            transition: all 1s;
        }
        .box ul .clickLi{
            transform: rotate(0deg) translate(-50%,-50%) scale(1.5) !important;
            left: 900px !important;
            top: 400px !important;
            z-index: 999 !important;
        }
    </style>

    <script src="./jQuery/jquery.js"></script>

    <script>

        $(function () {
            /*
                位置随机的方法
            */
            //获取屏幕的宽高
            var bodyWidth = $(document).width()
            var bodyHeight = $(document).height()
            $('li').each(function(){
                $(this).css('top', random(0, bodyHeight-350) + 'px').css('left', random(0,bodyWidth-350) + 'px')
                $(this).css("transform", "rotate(" + random(0,360) + "deg)");
                
            })

            $('li').click(function(){
                $(this).addClass('clickLi').siblings().removeClass('clickLi')
            })
            //随机数
            function random(minNum, maxNum) {
                return Math.floor(Math.random() * (maxNum - minNum)) + minNum
            }
        })
    </script>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./images/0.jpg" alt=""></li>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/10.png" alt=""></li>
            <li><img src="./images/11.png" alt=""></li>
            <li><img src="./images/12.png" alt=""></li>
            <li><img src="./images/13.png" alt=""></li>
            <li><img src="./images/14.png" alt=""></li>
            <li><img src="./images/16.png" alt=""></li>
            <li><img src="./images/17.png" alt=""></li>

        </ul>
    </div>
</body>

</html>